<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scale=no" />
  <meta name="description" content="Web site created using create-react-app" />
  <title>好客租房</title>
  <!-- <style>
    /* 
      实现Rem响应式布局开发的步骤
        @1 找参照的比例（例如设计稿的比例 -> 一般都是750px），在这个比例下，给予html.fontSize一个初始值
        html {
          font-size: 100px;
          // 750px的设计稿中, 1rem = 100px
        }

        @2 根据当前设备的宽度，计算相当于设计稿750来讲，缩放的比例，从而然Rem的转换比例，也跟着缩放

        @3 一般会给页面设置最大宽度，超过这个宽度，不再让rem比例继续变大; 内容居中，左右两边空出来即可！！
    */
    html {
      font-size: 100px;
    }

    html,
    body {
      height: 100%;
    }

    #root {
      margin: 0 auto;
      max-width: 750px;
      height: 100%;
    }
  </style> -->
  <!--  <script>
    // 计算当前设备下，rem和px的换算比例
    (function () {
      const computed = () => {
        let html = document.documentElement;
        // 获取设备宽度
        let deviceWidth = html.clientWidth;
        // 获取设计稿宽度
        let designWidth = 750;

        if (deviceWidth >= designWidth) {
          html.style.fontSize = "100px";
          return;
        }
        let ratio = deviceWidth * 100 / designWidth;
        html.style.fontSize = ratio + 'px';
      };
      computed();

      window.addEventListener("resize", computed);
    })();
  </script> -->
</head>

<body>
  <div id="root"></div>
</body>

</html>